<template>
  <div class="container">
    <!-- v4版本之前的纪要存在沟通目标 -->
    <div class="session-view" v-if="haveSalesGoal">
      <div class="title-view">
        <h4>沟通目标及达成情况</h4>
      </div>
      <span class="tag">目标回顾</span>
      <img class="result-icon" :src="resultIcon" />
      <p class="mt-2 mb-3">{{ salesGoal }}</p>
      <span class="tag">达成分析</span>
      <p :class="haveSalesGoal ? 'mt-2' : 'red-text mt-2'">
        {{ targetSituation?.理由 }}
      </p>
    </div>

    <div class="session-view">
      <div class="title-view">
        <van-row>
          <h4>客户整体态度</h4>
          <img :src="attitudeIcon" alt="icon" />
        </van-row>
        <div class="detail" @click="onClickDetail(1)">详情</div>
      </div>
      <span class="tag">态度分析</span>
      <p class="mt-2">
        {{ attitudeReson }}
      </p>
    </div>

    <div class="session-view">
      <div class="title-view">
        <h4>待办</h4>
        <div class="detail" @click="onClickDetail(3)">详情</div>
      </div>
      <template v-if="todoList.length > 0">
        <li v-for="item in todoList" :key="item">
          {{ item.text }}
        </li>
      </template>
      <p v-else>暂无待办</p>
    </div>

    <div class="session-view">
      <div class="title-view">
        <h4>竞争情况</h4>
        <div class="detail" @click="onClickDetail(2)">详情</div>
      </div>
      <div>
        <template v-if="competeList.length > 0">
          <span class="tag" v-for="(item, index) in competeList" :key="index">
            {{ item.text }}
          </span>
        </template>
        <p v-else>未提及竞争对手</p>
      </div>

      <div class="title-view" style="margin-top: 18px">
        <h4>风险项</h4>
        <div class="detail" @click="onClickDetail(4)">详情</div>
      </div>
      <div>
        <template v-if="riskList.length > 0">
          <span class="tag" v-for="(item, index) in riskList" :key="index">
            {{ item.text }}({{ item.count }})
          </span>
        </template>
        <p v-else>无识别风险项</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "pinia";
import { useMinutesStore } from "@/store";
import icons from "@/icons/svg/minute";

export default {
  name: "AnalysisOverview",
  emits: ["update:active"],
  methods: {
    onClickDetail(index) {
      this.$emit("update:active", index);
    },
  },
  computed: {
    ...mapState(useMinutesStore, {
      report: (state) => state.report,
      salesAnalysisReports: "salesAnalysisReports",
      asrStore: "asrStore",
      customerAttitude: "customerAttitude",
      targetSituation: "targetSituation",
      todoInfo: "todoInfo",
      competeInfo: "competeInfo",
      riskInfo: "riskInfo",
    }),

    riskListInfo() {
      let riskList = this.riskInfo?.风险项 || [];
      let height = riskList.filter((v) => v.风险等级 === "高") || [];
      let medium = riskList.filter((v) => v.风险等级 === "中") || [];
      let low = riskList.filter((v) => v.风险等级 === "低") || [];
      return {
        height,
        medium,
        low,
      };
    },

    attitudeReson() {
      // 客户整体态度，分析理由
      return this.customerAttitude?.客户侧整体态度.理由;
    },
    resultIcon() {
      if (!this.targetSituation) {
        return icons.undoneIcon;
      }
      // 达成结果图标
      if (this.targetSituation.评估结果 === "未达成") {
        return icons.undoneIcon;
      } else if (this.targetSituation.评估结果 === "达成") {
        return icons.doneIcon;
      } else {
        return icons.unableDetermineIcon;
      }
    },

    attitudeIcon() {
      // 态度图标
      if (!this.customerAttitude) {
        return;
      }
      const { 客户侧整体态度 } = this.customerAttitude;
      const { 整体情绪 } = 客户侧整体态度;
      if (整体情绪 === "中性") {
        return icons.neutralIcon;
      } else if (整体情绪 === "积极") {
        return icons.activeIcon;
      } else {
        return icons.negativeIcon;
      }
    },

    salesGoal() {
      return this.asrStore.salesGoal;
    },

    haveSalesGoal() {
      return this.salesGoal?.length > 0;
    },

    todoList() {
      console.log("todoList: ", this.todoInfo);
      if (!this.todoInfo.待办事项) return [];
      return (
        this.todoInfo?.待办事项.map((v) => {
          return {
            text: v.待办内容 || "",
          };
        }) || []
      );
    },

    competeList() {
      return (
        this.competeInfo?.map((v) => {
          const { count, competitor } = v;
          return {
            text: `${competitor.commonName}(${count})`,
          };
        }) || []
      );
    },

    riskList() {
      const { height, medium, low } = this.riskListInfo;
      return [
        {
          text: "高风险",
          count: height.length,
        },
        {
          text: "中风险",
          count: medium.length,
        },
        {
          text: "低风险",
          count: low.length,
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
@import "./analysis.less";

.container {
  padding: 15px 15px 0 15px;
  background-color: #fff;
}

.session-view {
  position: relative;
}
.result-icon {
  position: absolute;
  top: 24px;
  right: 24px;
}

.red-text {
  color: red;
}
</style>
